<template>
  <div class="register-Page">
    <div class="register-Title">
     <i class="el-icon-arrow-left" @click="goback"></i>
    </div>
    <br><br>

    <div class="loading-style">

      <i class="el-icon-phone-outline"></i>
      <input type="text" class="username" placeholder="手机/邮箱"/>
      <hr class="hr-style">

      <i class="el-icon-share"></i>
      <input type="text" class="yanzhengma" placeholder="验证码"/>
      <span class="getCode1">|<el-button type="text" class="getCode2">获取短信验证码</el-button></span>
      <hr class="hr-style">


      <i class="el-icon-edit"></i>
      <input type="password" class="password" placeholder="密码（6-20英文和数字）"/>
      <hr class="hr-style">

      <i class="el-icon-edit"></i>
      <input type="password" class="password" placeholder="重复密码"/>
      <hr class="hr-style">

      <i class="el-icon-news"></i>
      <input type="text" class="penName" placeholder="笔名（选填）"/>
      <hr class="hr-style">

      <el-button type="text" class="register-directly-span" @click.native="gotoRegisterPage">没有账号，立即注册<i class="el-icon-arrow-right" ></i></el-button>
      <el-button type="primary" class="register-button" @click.native="gotoLoadingPage">注册</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
    methods:{
      goback(){
        this.$router.go(-1);
      },
      gotoLoadingPage(){
        this.$router.push('/loading');
      }
    }
  }
</script>

<style scoped>
  .loading-style{
    position: relative;
    margin-top: 50px;
  }
  .el-icon-arrow-left{

    float: left;
    margin: 5px;
  }
  .hr-style{
    width: 80%;
    margin-top:10px;
    border-color: #f6f6f6;
  }
  .el-icon-phone-outline{
    margin-left: -40px;
    margin-right: 20px;
  }
  .el-icon-share{
    margin-left: -40px;
    margin-right: 20px;
  }
  .username{
    width: 60%;
    border:none;
    outline: none;
    background-color: #fafafa;
  }
  .yanzhengma{
    width: 20%;
    border:none;
    background-color: #fafafa;

  }
  .password{
    width: 60%;
    border:none;
    outline: none;
    background-color: #fafafa;
  }
  .penName{
    width: 60%;
    border:none;
    outline: none;
    background-color: #fafafa;
  }
  .el-icon-edit{
    margin-left: -40px;
    margin-right: 20px;
  }
  .el-icon-news{
    margin-left: -40px;
    margin-right: 20px;
  }

  .register-button{
    width: 80%;
    margin-top:260px;
    margin-left: -5px;
    background-color:black;
    border-radius: 20px;
    color: #d0d0d0;
    opacity: 0.85;
  }
  .getCode1{
    color: lightgray;
    margin-left: 25px;
  }
  .getCode2{
    color: lightgray;
    margin-left: 30px;
  }
</style>
